<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>

  <body>
    <div id="canvas-wrp">
      <canvas id="canvas" style=" border:1px solid #ccc ;display: block; margin: 100px auto;"></canvas>

    </div>
  </body>

  <script>
    let canvas = document.querySelector('#canvas')
    canvas.width = 800
    canvas.height = 600
    let cxt = canvas.getContext("2d");
    cxt.beginPath()
    cxt.moveTo(150, 50)
    cxt.lineTo(650, 50)
    cxt.lineTo(650, 550)
    cxt.lineTo(150, 550)
    cxt.lineTo(150, 50) //最后一笔可以不画
    cxt.closePath()//使用closePath()闭合图形

    cxt.fillStyle = 'yellow' //填充色
    cxt.lineWidth = 5
    cxt.strokeStyle = 'pink'

    cxt.fill() //上色
    cxt.stroke()

  </script>
  <script>

  </script>

</html>